
<div class="container-fluid">
  <div class="row">
    <div class="col-xs-12">
      <ol class="breadcrumb">
        <li><a href="/">Home</a></li>
        <li
          *ngFor="let dir of path; index as i"
          [class.active]="i + 1 === path.length"
        >
          <a
            [href]="path.slice(0, i + 1).join('/')"
            *ngIf="i + 1 !== path.length"
          >{{ dir }}</a>
          {{ i + 1 === path.length ? dir : '' }}
        </li>
      </ol>
    </div>
    <div
      class="col-xs-3 card"
      *ngFor="let card of result; index as i"
    >
      <div class="panel panel-default">
        <div class="panel-body">
          <span class="glyphicon glyphicon-share-alt" *ngIf="card.type === 'back'"></span>
          <span class="glyphicon glyphicon-folder-open" *ngIf="card.type === 'dir'"></span>
          <span class="glyphicon glyphicon-file" *ngIf="card.type === 'file'"></span>
          <a *ngIf="card.type === 'file'" href="/file/{{card.id}}">{{ card.name }}</a>
          <a *ngIf="card.type !== 'file'" href="/{{card.id}}">{{ card.name }}</a>
        </div>
        <div class="panel-footer">
          <button
            *ngIf="card.type === 'back'"
            type="button" class="btn btn-default"
            (click)="add()"
          >
            <span class="glyphicon glyphicon-plus"></span>
          </button>
          <button
            *ngIf="card.type === 'file'"
            type="button" class="btn btn-default"
            (click)="remove(card)"
          >
            <span class="glyphicon glyphicon-remove"></span>
          </button>
          <button
            *ngIf="card.type === 'file'"
            type="button" class="btn btn-default"
            (click)="move(card)"
          >
            <span class="glyphicon glyphicon-move"></span>
          </button>
          <button
            *ngIf="card.type === 'file'"
            type="button" class="btn btn-default"
            (click)="rename(card)"
          >
            <span class="glyphicon glyphicon-pencil"></span>
          </button>
          <button
            *ngIf="card.type === 'dir'"
            type="button" class="btn btn-default"
            (click)="rmdir(card)"
          >
            <span class="glyphicon glyphicon-remove"></span>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" tabindex="-1" role="dialog" id="move">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="move-title"></h4>
      </div>
      <div class="modal-body">
        <div class="input-group">
          <input type="text" class="form-control" placeholder="id" id="move-id" style="display: none">
          <span class="input-group-addon" id="basic-addon1">/</span>
          <input type="text" class="form-control" placeholder="path" id="move-input">
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" (click)="afterMove()">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<div class="modal fade" tabindex="-1" role="dialog" id="rename">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="rename-title"></h4>
      </div>
      <div class="modal-body">
        <div class="input-group">
          <input type="text" class="form-control" placeholder="id" id="rename-id" style="display: none">
          <span class="input-group-addon" id="basic-addon1">@</span>
          <input type="text" class="form-control" placeholder="path" id="rename-input">
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" (click)="afterRename()">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<div class="modal fade" tabindex="-1" role="dialog" id="add">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="add-title"></h4>
      </div>
      <div class="modal-body">
        <div class="input-group">
          <span class="input-group-addon" id="basic-addon1">/</span>
          <input type="text" class="form-control" placeholder="path" id="add-path">
          <span class="input-group-addon" id="basic-addon2">@</span>
          <input type="text" class="form-control" placeholder="name" id="add-name">
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" (click)="afterAdd()">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
